<template>
  <div class="tabbar">
    <ul class="border">
      <router-link v-for="(item, idx) in dataList" tag="li" :to="item.path" key="idx">
        <p>{{ item.text }}</p>
      </router-link>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        dataList: [
          {
            text: '首页',
            path: 'home'
          },
          {
            text: '产品',
            path: 'invest'
          },
          {
            text: '发现',
            path: 'find'
          },
          {
            text: '我的',
            path: 'mine'
          }
        ]
      }
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/_variable.scss';

  .tabbar {
    width: 100%;
    height: 97px;
    ul {
      display: flex;
      align-items: center;
      height: 100px;
      background: #fff;
      box-shadow: 0 -1px 3px 1px $base-e5e5e5;
      li {
        flex: 1;
        height: 100%;
        text-align: center;
        background-size: 42px 42px;
        background-position-x: 50%;
        background-position-y: 20%;
        background-repeat: no-repeat;
        user-select: none;
        @each $idx, $name in (1, home),(2, invest),(3, find),(4, my) {
          &:nth-child(#{$idx}) {
            background-image: url('../../assets/#{$name}@3x.png');
            &.router-link-active {
              background-image: url('../../assets/#{$name}_hover@3x.png');
            }
          }
        }
      }
    }
    p {
      height: 100%;
      padding-top: 65px;
      font-size: 26px;
      color: $base-666;
      &:active {
        color: $base-ff6c00;
      }
    }
    .router-link-active {
      p {
        color: $base-ff6c00;
      }
    }
  }
</style>
